<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <TextAnnotationToggle/>
            </n-icon>
            <Handle id="textUpload.vue-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>上传文档</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="上传文档">
                <n-space vertical style="width: 500px;">
                    <n-upload
                        :action="app.ip+'perform_tasks/word_file'"
                        :headers="{token: user.getToken}"
                        @finish="handleFinish"
                        accept=".txt,.docx"
                    >
                        <div class="row">
                            <span>本地文件: </span>
                            <n-button>读取本地文件</n-button>
                        </div>

                    </n-upload>
                    <n-input
                        v-model:value="props.data.text"
                        type="textarea"
                    />
                </n-space>
            </n-card>

        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {TextAnnotationToggle} from "@vicons/carbon";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";

const app = useAppStore()
const user = useUserStore()
const props = defineProps(['isValidTargetPos', 'data'])

// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        popup.show = false
    }
})

// 后端读取读取文件结束
const handleFinish = ({event}) => {
    // 后端读取读取文件结束
    const response = JSON.parse(event.currentTarget.response)
    props.data.text = response.data
    window.$message[response.tip.type](response.tip.info)
}
</script>

<style scoped lang="less">

</style>